@function power ($x, $n) {
  $ret: 1;

  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    } 
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }

  @return $ret;
}

@mixin border-radius($radius: 3px) {
  border-radius: #{$radius};
  -moz-border-radius: #{$radius};
  -webkit-border-radius: #{$radius};
}

@mixin opacity($value) {
  filter:alpha(opacity=$value*100); /* msie */
  -moz-opacity: $value; /* firefox 1.0 */
  -khtml-opacity: $value; /* webkit */
  opacity: $value; /* css 3 */
}

@mixin transform($value...) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

@mixin transition-property($args...) {
  -webkit-transition-property: $args;
  -moz-transition-property: $args;
  transition-property: $args;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@mixin animation($name...) {
  -webkit-animation: $name;
  -moz-animation: $name;
  -ms-animation: $name;
  animation: $name;
}

// Clearfix
@mixin clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

@mixin animation-fill-mode($args...) {
  -webkit-animation-fill-mode: $args;
  -moz-animation-fill-mode: $args;
  animation-fill-mode: $args;
}
